<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>方法式绑定容器</title>
</head>
<body>
    <div id="root">
        <div v-bind:class='name'>{{name}}</div>
        <input type="checkbox" v-model="bool" value="尼古拉">{{content}}
        <input type="text" v-model:value="content">
    </div>

    <script>
        const vm = new Vue({
            data() {
                return {
                    name:'尼古拉斯凯奇',
                    bool:['尼古拉'],
                    content:'数据双向绑定'
                }
            },
        }).$mount('#root')

        console.log(vm)

        // 经过证明 --- 为何能在这里实行链式调用，因为调用这个挂载方法之后的返回值还是这个实例对象！！！
        // 所以它可以实行链式调用
        // let result = vm.$mount("#root")
        // console.log(result)
    </script>
</body>
</html>